<template>
	
	<div class="app">
		
		
		<slider :sonlist="imginfo" ></slider>
		
		<div class="mui-content">
			<div class="mui-content-padded">
				<h2>{{buyinfo.title}}</h2>
				<span>{{buyinfo.add_time | time("YYYY-MM-DD")}}</span>
				
			</div>
		</div>
		<div class="father">
		<num v-on:num="getnum"></num>   <!--num接受子组件传入的值，有变化 就触发 事件-->
		<transition  name="fade"   v-on:before-enter="beforeEnter"   v-on:enter="enter" v-on:after-enter="afterEnter" >
		    <span v-if="show"  class="ball">{{num}}</span>
		</transition>
		</div>
		
		<mt-button @click="toupdatanum" class="mt1" plain type="danger" >加入购物车</mt-button>
		
		
		
		
		<router-link :to='"/goodsinfo/"+link'>
		 <mt-button  class="mt1" plain type="danger"  size="large">图文介绍</mt-button>
		</router-link>
		
		
		
		 <mt-button @click="comment" class="mt1" plain type="danger"  size="large">商品评论</mt-button>
		
	</div>
	
</template>

<script>
	import  commit  from "../../kits/commit.js"
	import   slider from "../puclicson/slider.vue" 
	import    num  from "../puclicson/num.vue"
	import   comments  from  "../puclicson/comment.vue"
	import  {cats} from "../../kits/cat.js"
	import  {setItem}  from   "../../kits/catshop.js"
	
	
	
	export default{
		data(){
			return{
				show:false,
				imginfo:{},
				buyinfo:{},
				num:0,
			    link:87
			}
		},
		created(){
			this.link = this.$route.params.id - 0
			this.gettu(this.$route.params.id )
			this.getbuyinfo(this.$route.params.id )
		},
		methods:{
			gettu(newid){
				var url = commit.api + "/api/getthumimages/"+newid;
				this.$http.get(url).then(res=>{
					res.body.message.forEach(item =>{
						item.url ="/goodsinfo/" +this.$route.params.id
					})
					
					this.imginfo = res.body.message;
				},res=>{
					console.log("数据获取失败")
				})
			},
			getbuyinfo(newid){
				var url = commit.api + "/api/goods/getinfo/"+newid;
				this.$http.get(url).then(res=>{
				
					this.buyinfo = res.body.message[0];
				},res=>{
					console.log("数据获取失败")
				})
				
			},
			getnum(obj){
				this.num = obj.num
			},
			beforeEnter(el){
				  el.style.transform = 'translate3d(0,0,0)';
			},
			enter(el,done){
				 var offset = el.offsetWidth; //设置这句话就能保证小球实时移动
                //表示小球的动画进行到最后的状态
                el.style.transform = 'translate3d(155px,317px,0)';
				
				done()
			},
			afterEnter(el){
				this.show =! this.show
			},
			toupdatanum(){
				
				
				setItem({"goodsid":this.link,"num":this.num})
				
				this.show =! this.show
				cats.$emit("num",this.num)
				
				
			},
			comment(){
				let id = this.$route.params.id
				this.$router.push({name:'goodscomment',params:{id:id}});
			}
		},
		components:{
		 	"slider":slider , /* 使用子 组件, 定义html中的标签*/
		 	num
		 }
		
			
		
	}
</script>

<style scoped>
	.img img{
		width: 100%;
	}
	.father{
		position: relative;
	}
	
	
	.ball{
		text-align: center;
		color: #FFFFFF;
		width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position:absolute;
        top:0px;
        left:100px;
        z-index: 50;
        transition: all 1s cubic-bezier(0,-0.59,.99,-0.23);
	}
</style>